<template>
  <div class="layout">
    <Layout>
      <Header class="layout-Top">
        <Menu
          mode="horizontal"
          style="background-color: #2561ef;"
          theme="dark"
          active-name="1"
        >
          <div class="layout-logo">OA办公后台管理系统</div>
          <div class="layout-nav">
            <MenuItem name="1" to="/">
              <Icon type="ios-navigate"></Icon>
              首页
            </MenuItem>
            <Submenu name="2">
              <template #title>
                <Icon type="ios-keypad"></Icon>
                应用中心
              </template>
              <MenuGroup  style="z-index: 999;">
                <MenuItem to="/AppCenter/Attendance" name="考勤">考勤</MenuItem>
                <MenuItem to="/AppCenter/cart" name="3-2">车辆</MenuItem>
                <MenuItem to="/AppCenter/documentlibrary" name="3-3">文档库</MenuItem>
                <MenuItem to="/AppCenter/employee" name="3-4">员工</MenuItem>
                <MenuItem to="/AppCenter/News" name="3-5">新闻</MenuItem>
                <MenuItem to="/AppCenter/salary" name="3-4">薪酬</MenuItem>
                <MenuItem to="/AppCenter/settings" name="3-5">系统设置</MenuItem>
              </MenuGroup>
            </Submenu>
            <MenuItem name="3">
              <Input
                v-model="value"
                icon="ios-search"
                placeholder="Enter something..."
                style="width: 300px"
              />
            </MenuItem>
          </div>
          <div class="menu-right">
            <MenuItem>
              <Icon type="md-notifications" />
            </MenuItem>
            <MenuItem>
              <Icon type="md-person" />
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Layout>
        <router-view></router-view>
      </Layout>
    </Layout>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import router from "../../router/index";
import { RouterView } from "vue-router";
const value = ref("");
</script>
<style lang="scss">
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-Top {
  background-color: #2561ef;
  .layout-logo {
    width: 150px;
    height: 30px;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
    line-height: 30px;
    color: #fff;
    font-weight: 700;
    text-align: center;
  }
  .layout-nav {
    // width: 420px;
    // margin: 0 auto;
    margin-left: 15%;
  }
  .menu-right {
    float: right;
  }
}
</style>
